<template>
  <view class="select" style="width: 100%">
    <u-input v-model="date"  @click="show=true" placeholder-style="font-size:12px;color:#cfd4db" style="width: 100%" :placeholder="placeholder" type="select" :border="border"></u-input>
    <u-select v-model="show" mode="single-column" :list="list" @confirm="confirm" @change="confirm"></u-select>
  </view>
</template>

<script>
import {getDict} from '@/api/utils.js'

export default {
  data() {
    return {
      show: false,
      label: '',
      date:'',
      list: []
    }
  },
  props: {
    value:{

    },
    defaultValue:{
      default: ''
    },
    placeholder:{
      type:String
    },
    dict:{
      type:String
    },
    border:{
      default: false
    }
  },
  model:{
    prop:'value'
  },
  watch:{
    value: {
      immediate: true,    // 这句重要
      handler (val) {
        if(val==undefined||val==null){
          this.date=''
        }else {
          this.date=val
        }
        console.log(val)
      }
    }
  },
  computed: {
    _placeholder() {
      return this.label ? this.label : this.placeholder
    },
  },
  mounted() {
    getDict(this.dict).forEach(item => {
      this.list.push({label:item.dictName,value:item.dictName})
    })
  },

  methods: {
    confirm(e) {
      this.label = e[0].label
      this.date = e[0].value
      this.$emit("input", e[0].value);
      this.$emit("change", e[0].value);
    }
  },
}
</script>

<style lang="scss" scoped>
.select {
  display: flex;
  font-size: 28 rpx;
  line-height: 1.5em;
  justify-content: space-between;
  max-width: 100%;

  .placeholder {
    color: #C0C4CC;
  }
}
</style>